<template>
    <VContainer class="redstone-contaienr">

        <v-row>
            <v-col>
                <VChipGroup class="pb-3" selected-class="bg-pink-darken-1" mandatory filter>
                    <VChip v-for="(item, index) in lst" :key="index" class="flex-shrink-0 mr-5" elevation="2"
                        @click="itemIndex = index">{{ item.title
                        }}</VChip>
                </VChipGroup>
            </v-col>
        </v-row>
        <v-row>
            <v-col cols="12" md="6">
                <VSheet rounded class="pb-4">
                    <div class="text-center text-h5 my-2">教程列表</div>
                    <VRow justify="center">
                        <VCol v-for="(_, n) in machineDocListNumber" class="card flex-grow-1" :key="n" cols="12" md="6"
                            @click="onMachineDoc(n)" :style="lst[itemIndex].machineDoc.length >= n + 1 ? '' : 'opacity:0'">
                            <VCard class="mx-auto">
                                <VImg src="https://cdn.pixabay.com/photo/2020/07/12/07/47/bee-5396362_1280.jpg"
                                    aspect-ratio="4/3" max-height="200" cover class="align-end ">
                                    <VCardTitle class="text-white text-button bg-black" style="opacity:0.6"
                                        v-if="lst[itemIndex].machineDoc.length >= n + 1">
                                        <!-- 教程详细信息 -->


                                        <h3 class="mb-5"> {{ lst[itemIndex].machineDoc[n].title }}</h3>
                                        <h5> {{ lst[itemIndex].machineDoc[n].type }}</h5>
                                        <div> {{ lst[itemIndex].machineDoc[n].tag }}</div>
                                    </VCardTitle>
                                </VImg>
                            </VCard>
                        </VCol>
                    </VRow>
                </VSheet>
            </v-col>
            <v-col cols="12" md="6">
                <VSheet rounded class="pb-4 pl-4 pr-4">
                    <div class="text-center text-h5 my-2">实装列表</div>
                    <VRow justify="center">
                        <VCol v-for="(_, n) in machineListNumber" class="card flex-grow-1" :key="n" cols="auto"
                            :dense="false" style="box-sizing: border-box;"
                            :style="lst[itemIndex].machines.length >= n + 1 ? '' : 'opacity:0'">
                            <VCard class="mx-auto" width="200">
                                <VImg src="https://cdn.pixabay.com/photo/2020/07/12/07/47/bee-5396362_1280.jpg"
                                    max-height="200px" cover class="align-end">
                                    <VCardTitle class="text-white text-overline py-2 bg-black "
                                        v-if="lst[itemIndex].machines.length >= n + 1" style="line-height: 1;opacity:0.6">
                                        {{ lst[itemIndex].machines[n].desc }}
                                    </VCardTitle>
                                    <VCardSubtitle class="text-white text-overline pb-1 bg-black " style="opacity:0.6"
                                        v-if="lst[itemIndex].machines.length >= n + 1">
                                        {{ lst[itemIndex].machines[n].efficiencyDesc }}
                                    </VCardSubtitle>
                                </VImg>
                            </VCard>
                        </VCol>
                    </VRow>
                </VSheet>
            </v-col>
        </v-row>

        <!-- <div class="d-flex justify-space-between">

        </div> -->
    </VContainer>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
//模拟数据
//结构说明
// 树场/刷铁机/小麦机···  这些称之为红石机器类别，为主  --》  一对多关系  --》 玩家实装表 （--》 可能存在一对一关系 --》） 教程表

const itemIndex = ref(0)
const onMounted = () => {
    //初始化
    itemIndex.value = 0
}


const machineDocListNumber = computed(() => {
    let length = lst[itemIndex.value].machineDoc.length
    if (length < 3) {
        return 3
    }
    let remainder = length % 3
    return remainder === 0 ? length : length + 3 - remainder
})
const machineListNumber = computed(() => {
    let length = lst[itemIndex.value].machines.length
    if (length < 3) {
        return 3
    }
    let remainder = length % 3
    return remainder === 0 ? length : length + 3 - remainder
})
function onMachineDoc(e: number) {
    window.open(lst[itemIndex.value].machineDoc[e].url)
}
const lst = reactive([
    {
        title: "刷铁机", bgc: "https://cdn.jsdelivr.net/gh/wuxin0011/web-cdn-resource@main/image/ai/img_1.png", installed: 12,
        otherDesc: "补充说明",
        product: [
            { name: "铁锭" },
            { name: "鲜花" }
        ],
        //视为实装列表
        machines: [
            //adminCheck 视为是否经过管理证实
            {
                image: "https://cdn.jsdelivr.net/gh/wuxin0011/web-cdn-resource@main/image/ai/img_1.png",
                machineId: 0,
                palerNmae: "GreatMingCtu",
                machineName: "刷铁机", isLinkDoc: true, linkDocId: "2", minecraftcVersion: "1.19", serverVersion: "一周目", installedTime: "2023-5-5 23:16",
                constructionWorkers: ["loser", "zihanx"],
                time: 100,
                desc: "不容易啊，一大早起来到现在才搞完，材料都是俺自己收集的",
                efficiencyDesc: "十分钟一箱子",
                adminCheck: true
            }
        ],
        //教程列表
        machineDoc: [
            //complete 代表跟着这个教程实装到服务器的人数
            { title: "黑山大叔教你刷铁机", machineId: 0, url: "https://mc.web.xintianyuehui.cn", type: "红石/刷铁机", tag: "双维度", version: "1.16,1.18.1.19", like: 35, complete: 10 },
            { title: "壹号方块手把手刷铁机", machineId: 0, url: "https://mc.web.xintianyuehui.cn", type: "红石/刷铁机", tag: "单维度,丐版,手把手", version: "1.19", like: 35, complete: 10 },
            { title: "佛冷刷铁机", machineId: 0, url: "https://mc.web.xintianyuehui.cn", type: "红石/刷铁机", tag: "配套打包机,配套分类机", like: 35, complete: 10, version: "1.17" },
        ]
    },
    {
        title: "树场", bgc: "", installed: 12,
        otherDesc: "补充说明",
        product: [
            { name: "橡木圆木" },
            { name: "白桦圆木" },
            { name: "金合欢圆木" },
        ],
        //视为实装列表
        machines: [
            //adminCheck 视为是否经过管理证实
            {
                palerNmae: "GreatMingCtu", machineName: "树场", isLinkDoc: true, linkDocId: "2", minecraftcVersion: "1.19", serverVersion: "一周目", installedTime: "2023-5-5 23:16",
                constructionWorkers: ["loser", "zihanx"],
                time: 100,
                desc: "不容易啊，一大早起来到现在才搞完，材料都是俺自己收集的",
                adminCheck: true,
                machineId: 0,
                efficiencyDesc: "效率说明"
            }
        ],
        //教程列表
        machineDoc: [
            //complete 代表跟着这个教程实装到服务器的人数
            { title: "黑山大叔教你树场", machineId: 0, url: "https://mc.web.xintianyuehui.cn", type: "红石/树场", tag: "丐版树场", version: "1.16,1.18.1.19", like: 35, complete: 10 },
            { title: "壹号方块手把手教你佛冷树场", machineId: 0, url: "https://mc.web.xintianyuehui.cn", type: "红石/树场", tag: "双爆炸室,全树种,手把手", like: 35, complete: 10, version: "1.17" },
        ]
    }
]);
</script>

<style lang="scss">
.readstone-contaienr {

    .redstone-item {
        background: red;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }


}

.card {
    position: relative;
    transition: all 0.3s ease-in-out;

    .v-card-title {
        transition: all 0.3s ease-in-out;
        position: absolute;
        bottom: -80;
        width: 100%;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 700;
    }

    .v-img__img {
        transition: all 0.3s ease-in-out;
    }

    &:hover {
        .v-img__img {
            transform: scale(1.2);
        }

        .v-card-title {
            transform: translateY(-80px);

        }

        cursor: pointer;
    }
}
</style>
